<template>
    <div>
        <div>孙组件</div>
        注入数据(inject)：
        <div :style="{ backgroundColor: color }">{{ color }}</div>
        <van-button @click="change">改变数据</van-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, inject, Ref } from "vue";

export default defineComponent({
    setup() {
        const color:any = inject<Ref>("color");
        const list = ["red", "orange", "yellow", "green", "blue", "indigo", "purple"];
        const change = () => {
            list.some((item, index) => {
                if (color.value == item && index != list.length - 1) {
                    color.value = list[index + 1];
                    return true;
                } else if (color.value == item && index == list.length - 1) {
                    color.value = list[0];
                    return true;
                }
            });
        };
        return {
            color,
            change,
        };
    },
});
</script>

<style scoped></style>
